import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { HttpRequest } from "../../../service/httpRequest";

declare var $:any;


@Component({
  selector: 'chart-load',
  template: `
  <div id="loadstat" style="height:400px;width: 1200px; margin: 0 auto"></div>
  `
})
export class LoadComponent implements OnInit, OnChanges{
  @Input() public deviceId:string;
  @Input() public date:any;
  option;
  private params:any;
  constructor(private httpRequest:HttpRequest) { }

  ngOnInit() {
    this.paint();
  }


  ngOnChanges(changes: SimpleChanges): void {
    if(changes.date.currentValue == undefined) return;
    this.params.date_str = changes.date.currentValue.time;
    this.params.unit = changes.date.currentValue.type;
    this.getData();
  }

  getData(){
    switch(this.params.unit){
      case 'month':
        this.params.unit='months';
        break;
      case 'day':
        this.params.unit='days';
        break;
      case 'hour':
        this.params.unit='hours';
        break;
    }
    if(this.params.unit == 'year') {
      this.loadstat([
        ['2016',3000],
        ['2017',0],
        ['2018',0],
        ['2019',0],
        ['2020',0]
      ]);
    }
    else{
      this.httpRequest.sendGet('stat/djtj',this.params).subscribe(res => {
        this.loadstat(res);
      },err => console.log(err));
    }
  }

  paint(){

    let date = new Date();
    let ofday = date.getDate();
    let ofmonth = date.getMonth()+1;
    let ofyear = date.getFullYear();
    let time = ofyear + '-' + ofmonth  + '-' + ofday;
    this.params = {
      date_str:time,
      attr: 'Loadruntime',
      aggregator: 'avg',
      unit: 'hours',
      device_id: this.deviceId
    };

    this.getData();

  }


  loadstat(data){
    $('#loadstat').highcharts({
      chart: {
        type: 'column'
      },
      title: {
        text: '设备加载时间'
      },
      subtitle: {
        text: '设备加载时间的统计：以平均值的统计'
      },
      xAxis: {
        type: 'category',
        labels: {
          rotation: -45,
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
          }
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: '加载时间 (h)'
        }
      },
      legend: {
        enabled: false
      },
      tooltip: {
        pointFormat: '加载时间: <b>{point.y} 小时</b>'
      },
      series: [{
        color:'#32CD32',
        name: '加载时间',
        data: data,
        dataLabels: {
          enabled: true,
          //rotation: -90,
          color: '#FFFFFF',
          align: 'right',
          format: '{point.y}', // one decimal
          y: 5, // 10 pixels down from the top
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
          }
        }
      }]
    });
  }

}
